<template>
   <div>查询栏</div>
   <div>
      <div class="container-wrapper"> 
        <draggable
                tag="ul"
                :list="basicFields"
                item-key="key" 
                :group="{name: 'searchGroup', pull: 'clone', put: false}"
                ghost-class="ghost"
                animation="300"
                @start="onStart"
                @end="onEnd"
                :move="onMove"
                :sort="false"
            >
              <template #item="{ element: fld }">
                <li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
                  <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon" />{{fld.name}}</span>
                </li>
              </template>
            </draggable>
        </div>
        <div style="clear:both;height:0px;overflow:hidden; line-height: normal;"></div>
        <div class="form-widget-canvas" style="height:80px">
          <draggable 
            :list="searchList"
            item-key="id" 
            group="searchGroup"
            ghost-class="ghost"
            handle=".transition-group-el"
            filter=".forbid"
            dragClass="dragClass"
            chosen-class="chosenClass"
            animation="300"
            @add="onAdd" 
            :move="onMove"
          >
               <template #item="{ element: widget, index }">
                <div class="transition-group-el">
                  <template v-if="'container' === widget.category">
                    <div></div>
                  </template>
                  <template v-else>
                    <fieldWidget :data="widget" @remove="remove"></fieldWidget>
                  </template>
                </div>
              </template>
          </draggable>
        </div>
   </div>
   <div>工具栏</div>
   <div><buttonToolBar :data="widgetList" @selected="selected"></buttonToolBar></div>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import draggable from "vuedraggable"
  import SvgIcon from '@/designer/svgIcon'
  import {nanoid} from 'nanoid'
  import fieldWidget from './fieldWidget'
   const state = reactive({
        basicFields: [
          {id:'10',type: 'grid', category: 'container', icon: 'grid', name:'栅格'},
          {id:'11', key:'input', type: 'input', icon: 'text-field', formItemFlag: true, name:'单行输入'},
          {id:'12', key:'date', type: 'date', icon: 'date-field', formItemFlag: true, name:'日期'},
          {id:'13', key:'textarea', type: 'textarea', icon: 'text-field', formItemFlag: true, name:'多行输入'},
          {id:'14', key:'select', type: 'select', icon: 'date-field', formItemFlag: true, name:'下拉选项'}
        ],
        widgetList: [],
        searchList:[
             {id:'1',type: 'input',  icon: 'grid', name:'栅格'},
        ],
  });
  
 
  const {
    basicFields,widgetList,
   searchList
  }  = toRefs(state);

  function add(){
    let fieldId= nanoid();
    state.searchList.push(
      {fieldId: fieldId, type: 'input',  name:'新操作'}
    );
  }
  function  onAdd(item){
     item.fieldId= nanoid();
     if(item.type == 'grid'){
       
     }
     console.log(item);
  }

  function remove(fieldId){
      console.log(fieldId);
      let removeIndex = state.searchList.findIndex(item => {
          if (item.fieldId == fieldId) {
              return true
          }
      })
      state.searchList.splice(removeIndex, 1);
  }

  function selected(item){
     console.log(item);
  }
</script>

<style lang="scss" scoped>
  .container-wrapper {
    position: relative;
    margin-bottom: 5px;

    .container-action{
      position: absolute;
      //bottom: -30px;
      bottom: 2px;
      right: 2px;
      height: 28px;
      line-height: 28px;
      background: #409EFF;
      z-index: 999;

      i {
        font-size: 18px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }
  }
  .container-wrapper ul {
    list-style: none;
    margin-left: 50px;
  }

  .container-wrapper :deep(ul) > li {
    display: inline;
    line-height: 40px;
    float:left
  }

</style>
